<template>
  <!--$$侵入代码$$-->
  <MessageHeader @search-param="onSearch"/>
  <!--$$侵入代码$$-->
  <view class="sep-v-small"/>
  <!--$$侵入代码$$-->
  <MessageResult v-if="lenNotEmpty(context,'searchResult')" :content="context.searchResult"/>
  <cars-swiper/>
  <!--$$侵入代码$$-->
  <view class="content">
    <image class="logo" src="/static/logo.png"></image>
  </view>
</template>

<script setup>
import buildGenerators from './generators' // generators目录下是的文件是侵入代码
import defaultData from './defaultData' // defaultData是由cli生成
import searchContent from '../../api/searchContent' // searchContent.js 由cli导入
// --$$侵入代码$$--
import CarsSwiper from '../../uni-compoents-demo/CarsSwiper.vue'
import MessageHeader from '../../uni-compoents-demo/MessageHeader.vue'
import MessageResult from '../../uni-compoents-demo/MessageResult.vue'
import { lenNotEmpty } from '../../utils'
// --$$侵入代码$$--
import { mergeAll } from 'ramda'
import { ref, provide } from 'vue'

const context = ref(defaultData)

Promise.all(buildGenerators())
.then((datas)=>{
  context.value = mergeAll(datas)
})

const onSearch = (param) =>{
  searchContent(param).then((data)=>{
    context.value.searchResult = data
  })
  console.log('handle search', param)
}

provide('context', context)
</script>

<style scoped>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: $uni-color-title; /* #8f8f94 */
}
</style>
